1import {useState, useReducer, PropsWithChildren, useMemo} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import {useTranslation} from 'react-i18next';
  4import EventLayout, {TabComponent} from '../../../layouts/Event';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import {
  9  EventByUuidDocument,
 10  useFindUserVehiclesLazyQuery,
 11} from '../../../generated/graphql';
 12import useProfile from '../../../hooks/useProfile';
 13import Fab from '../../../containers/Fab';
 14import {
 15  initializeApollo,
 16  APOLLO_STATE_PROP_NAME,
 17} from '../../../lib/apolloClient';
 18
 19interface Props {
 20  eventUUID: string;
 21}
 22
 23const Page = (props: PropsWithChildren<Props>) => {
 24  return <EventLayout {...props} Tab={TravelsTab} />;
 25};
 26
 27const TravelsTab: TabComponent = (props: {event}) => {
 28  const classes = useStyles();
 29  const {t} = useTranslation();
 30  const {user} = useProfile();
 31  const [findUserVehicle, {data}] = useFindUserVehiclesLazyQuery();
 32  const vehicles = data?.me?.profile?.vehicles?.data || [];
 33  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 34  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 35
 36  useMemo(() => {
 37    if (user) findUserVehicle();
 38  }, [user]);
 39
 40  const addTravelClickHandler =
 41    user && vehicles?.length != 0
 42      ? toggleVehicleChoice
 43      : () => toggleNewTravel({opened: true});
 44
 45  return (
 46    <>
 47      <TravelColumns toggle={addTravelClickHandler} />
 48      <Fab
 49        onClick={addTravelClickHandler}
 50        aria-label="add-car"
 51        color="primary"
 52        className={classes.bottomRight}
 53      >
 54        {t('travel.creation.title')}
 55      </Fab>
 56      <NewTravelDialog
 57        context={openNewTravelContext}
 58        toggle={() => toggleNewTravel({opened: false})}
 59      />
 60      <VehicleChoiceDialog
 61        open={openVehicleChoice}
 62        toggle={toggleVehicleChoice}
 63        toggleNewTravel={toggleNewTravel}
 64        vehicles={vehicles}
 65      />
 66    </>
 67  );
 68};
 69
 70const useStyles = makeStyles(theme => ({
 71  bottomRight: {
 72    bottom: 0,
 73    right: theme.spacing(6),
 74
 75    [theme.breakpoints.down('sm')]: {
 76      right: theme.spacing(1),
 77      bottom: 56,
 78    },
 79  },
 80}));
 81
 82export async function getServerSideProps(ctx) {
 83  const {uuid} = ctx.query;
 84  const {host = ''} = ctx.req.headers;
 85
 86  const apolloClient = initializeApollo();
 87  const {data: {eventByUUID: {data: event = null} = {}} = {}} =
 88    await apolloClient.query({
 89      query: EventByUuidDocument,
 90      variables: {uuid},
 91    });
 92
 93  try {
 94    return {
 95      props: {
 96        [APOLLO_STATE_PROP_NAME]: apolloClient.cache.extract(),
 97        eventUUID: uuid,
 98        metas: {
 99          title: event?.name || '',
100          url: `https://${host}${ctx.resolvedUrl}`,
101        },
102      },
103    };
104  } catch (error) {
105    console.error(error);
106    return {props: {}};
107  }
108}
109
110export default Page;